<template>
  <el-container>
    <el-main>
      <el-button @click="toBack">返回</el-button>
      <el-button v-print="'#print'" type="primary">打印</el-button>

      <div id="print" class="app-container">
        <h1 align="center">{{ name }}</h1>
        <h3 align="center">成品仓库盘点</h3>
        <!-- <span style="margin-left:75%">打印日期:{{ dateFormat(new Date()) }}</span> -->
        <div class="case">
          <div>制表:{{ name }}</div>
          <div>打印日期:{{ dateFormat(new Date()) }}</div>
        </div>
        <table>
          <tr>
            <td>入仓单号</td>
            <td>客户名称</td>
            <td>发货状态</td>
            <td>过账</td>
            <td>订单数量</td>
            <td>实际库存数量</td>
            <td>发货数量</td>
            <td>剩余数量</td>
          </tr>
          <tr v-for="item in tableData" :key="item.id">
            <td style="width:400px">{{ item.warehouseNo }}</td>
            <td style="width:1500px">{{ item.name }}</td>
            <td style="width:400px">{{ item.carryTo }}</td>
            <td style="width:500px">{{ item.posting }}</td>
            <td style="width:400px">{{ item.orderNum }}</td>
            <td style="width:600px">{{ item.surplusNum }}</td>
            <td style="width:400px"> {{ item.alreadyDeliveryQuantity }}</td>
            <td style="width:400px">{{ item.endProductPos }}</td>
          </tr>
        </table>
      <!-- <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="warehouseNo"
            label="入仓单号"
          />
          <el-table-column
            prop="name"
            label="客户名称"
          />
          <el-table-column
            prop="carryTo"
            label="发货状态"
          />
          <el-table-column
            prop="posting"
            label="过账"
          />
          <el-table-column
            prop="orderNum"
            label="订单数量"
          />
          <el-table-column
            prop="surplusNum"
            label="实际库存数量"
          />
          <el-table-column
            prop="alreadyDeliveryQuantity"
            label="发货数量"
          />
          <el-table-column
            prop="endProductPos"
            label="剩余数量"
          />
          <el-table-column
            prop="checkDate"
            label="盘点日期"
          />
        </el-table>

        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :total="pagination.total"
          align="center"
          :current-page="pagination.page"
          :page-size="pagination.size"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div> -->
      </div></el-main>
  </el-container>
</template>

<script scope>
import initData from '@/mixins/initData'
import { list } from '@/api/basedata/firm'

export default {
  name: 'EndStockCheckPrint',
  mixins: [initData],
  data() {
    return {
      tableData: [],
      data: [],
      name: ''
    }
  },
  created() {
    this.data = this.$route.query.data
    this.getList()
  },
  methods: {
    dateFormat: function(time) {
      var date = new Date(time)
      var year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
     * */
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      // var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      // var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      // var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      return year + '-' + month + '-' + day
    },
    getList() {
      this.tableData = this.data
      this.tableData.forEach(a => {
      })
      this.pagination.total = this.tableData.length
      list().then(res => {
        var firmList = []
        firmList = res.list
        firmList.forEach(a => {
          if (a.isFirm === true) {
            this.name = a.name
          }
        })
      })
    },
    // 返回
    toBack() {
      this.$router.push('/end_product_stock_check')
    }
  }
}
</script>

<style scoped>
i {
  cursor: pointer;
}
table,tr,td{
  border:1px solid black;
}
.case{
  width:1050px;
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px ;
}
table{
  width:1050px;
  border-collapse:collapse;
  height: auto;
  margin: 0 auto;
  margin-top: 20px;
}
tr{
  height: 35px;
}
table td{
  height: 35px;
}
td{
  width: 180px;
  text-align: center ;
  padding-left:15px;
}
</style>
<style media="print">
  body {
    border: solid 1px #ffffff;
    margin:0;
  }
</style>
